<template>
  <div>
    <!-- 表格 -->
    <a-table
        sticky
        :dataSource="dataList"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        @change="handleTableChange"
        rowKey="id"
        :scroll="{ x: 'max-content' }"
        class="mt-10"
        :class="isDrawer ? 'no-title-table' : ''"
        :customRow="customRow"
        :row-selection="rowSelection"
    >
      <template #title>
        <a-row
            type="flex"
            justify="space-between"
            align="middle"
            class="table-header"
            v-if="!isDrawer"
        >
          <a-col> 收支流水</a-col>
          <a-col v-show="selectedRowKeys.length==0">
            <a-space>
              <a-button
                  v-if="!isTenant"
                  @click="incomeMatch"
                  v-permission="['streamList', 'auth', 'autoMatch']"
              >
                一键匹配
              </a-button>
              <!--              <a-button-->
              <!--                  v-if="!isTenant"-->
              <!--                  v-permission="['streamList', 'auth', 'billStreamRefund']"-->
              <!--                  @click="handleRefundConfig"-->
              <!--              >-->
              <!--                流水退款配置-->
              <!--              </a-button>-->
              <a-button v-if="!isTenant" @click="ownerPreStore">
                客户预存
              </a-button>
              <a-button @click="downLoadClick"
              >
                <template #icon>
                  <DownloadOutlined/>
                </template>
                导出报表
              </a-button
              >
              <a-button
                  v-permission="['streamList', 'curd', 'add']"
                  @click="importBillFlow"
              >
                <template #icon>
                  <UploadOutlined/>
                </template>
                导入流水
              </a-button>
              <a-button
                  type="primary"
                  @click="addTurnover"
                  v-permission="['streamList', 'curd', 'add']"
              >
                <template #icon>
                  <PlusOutlined/>
                </template>
                收支流水
              </a-button>
            </a-space>
          </a-col>
          <a-col v-show="selectedRowKeys.length!=0">
            <a-space>
              <a-button @click="downLoadClick"
                        type="primary"
                        ghost
              >
                导出报表
              </a-button
              >
              <a-button
                  type="primary"
                  @click="editTurnover"
                  ghost
                  v-permission="['streamList', 'auth', 'editAccountInfo']"
              >
                修改流水账户
              </a-button>
              <a-button
                  @click="closeSelect"
              >
                关闭
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </template>
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'room_number_txt'">
          <div v-if="record.build_bind && record.build_bind.room.length > 0">
            <RoomBuildBindInRecord :build_bind="record.build_bind"/>
            <span v-if="record.approval_status == 1"
                style="
                border: 1px solid red;
                color: red;
                font-size: 12px;
                display: inline-block;
                width: 70px;
                text-align: center;
              "
            >删除审批中</span
            >
          </div>
          <span v-else>--</span>
        </template>
        <template v-if="column.key === 'company_name'">
          <a
              v-if="record.company_id"
              @click.stop="toOwnerDetail(record.company_id)"
          >
            {{ text }}
          </a>
          <span v-else> {{ text || "--" }}</span>
        </template>
        <template v-if="column.key === 'invoice_title_txt'">
          {{ record.invoice_title_txt || "--" }}
        </template>
        <template v-if="column.key === 'textShow'">
          <span> {{ text || "--" }}</span>
        </template>
        <template v-if="column.key === 'is_close'">
          <span v-if="text == 0"> 关闭 </span>
          <span v-if="text == 1" style="color: #3eb026;"> 开启 </span>
          <span v-if="text == 2" style="color: #3cc4ff;"> 审批中 </span>
          <span v-if="text == 3" style="color: red;"> 拒绝 </span>
        </template>
      </template>
    </a-table>

    <!--  收支流水详情  -->
    <TurnoverDetailDrawer
        :visible="showDrawer"
        :id="tId"
        @handleCancel="showDraweres"
    />

    <!-- 租客详情 -->
    <OwnerDetailDrawer
        :visible="ownerDetailVisible"
        :id="ownerId"
        @cancel="ownerDetailVisible = false"
        @closeAllModal="closeAllModal"
    />

    <!--    一键-->
    <IncomeMatchModal :visible="matchVisible" @toCancel="matchVisible=false"/>

    <!--    修改收支账户-->
    <EditTurnoverAccount :visible="editVisible" :stream_ids="selectedRowKeys"
                         @toCancel="closeSelect"/>

    <!--    &lt;!&ndash;  流水退款配置  &ndash;&gt;-->
    <!--    <RefundConfigModal-->
    <!--        :visible="refundVisible"-->
    <!--        @handleSettingSuccess="handleRefundCancel"-->
    <!--        @handleCancel="handleRefundCancel"-->
    <!--    />-->
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  defineAsyncComponent, computed,
} from "vue";
import {
  DownloadOutlined,
  PlusOutlined,
  UploadOutlined,
} from "@ant-design/icons-vue";
import utils from "../../../../common/utils/utils";
import {message} from "ant-design-vue";
import {TextTip} from "bl-common-vue3";
import TurnoverDetailDrawer from "@/views/bill/TurnoverDetail/modules/TurnoverDetailDrawer.vue";

const OwnerDetailDrawer = defineAsyncComponent(() =>
    import("@/views/village/OwnerManage/modules/OwnerDetailDrawer.vue")
);
import RefundConfigModal from "@/views/bill/BillTurnover/modules/RefundConfigModal.vue";
import IncomeMatchModal from "./IncomeMatchModal.vue";
import EditTurnoverAccount from "./EditTurnoverAccount.vue";
import RoomBuildBindInRecord from "@/components/RoomBuildBindInRecord/index.vue";


export default defineComponent({
  name: "BillTurnoverTable",
  props: {
    isTenant: {
      type: Boolean,
      default: false, // 收银台有个租客收支流水
    },
    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
    pagination: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isDrawer: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    TurnoverDetailDrawer,
    DownloadOutlined,
    UploadOutlined,
    PlusOutlined,
    TextTip,
    OwnerDetailDrawer,
    RefundConfigModal,
    IncomeMatchModal,
    EditTurnoverAccount,
    RoomBuildBindInRecord,
  },
  setup(props, {emit}) {
    const state = reactive({
      showDrawer: false,
      tId: 0,
      ownerDetailVisible: false,
      ownerId: 0,
      refundVisible: false,
      matchVisible: false,
      editVisible: false,
      selectedRowKeys: [],
      selectedRows: [],
    });

    const closeAllModal = () => {
      emit("closeAllModal");
    };


    // 流水退款配置
    const handleRefundConfig = () => {
      state.refundVisible = true;
    };

    const handleRefundCancel = () => {
      state.refundVisible = false;
    };

    // 获取最大房源号
    const getMaxRoomNumber = (list) => {
      let max = 0;
      for (let room of list) {
        if (max < Number(room.room_number)) {
          max = Number(room.room_number);
        }
      }
      return max;
    };

    // 自定义行
    const customRow = (record) => {
      return {
        style: {
          cursor: "pointer",
        },
        onClick: (e) => handleTableRowClick(record),
      };
    };

    // 点击行
    const handleTableRowClick = (record) => {
      // $router.push({ name: "turnoverDetail", query: { tId: record.id } });
      state.showDrawer = true;
      state.tId = record.id;
    };

    const showDraweres = () => {
      state.showDrawer = false;
      state.tId = 0;
      emit("showDraweres");
    };

    const addTurnover = () => {
      emit("addTurnover");
    };

    const importBillFlow = () => {
      emit("importBillFlow");
    };

    const downLoadClick = () => {
      emit("downLoadClick", {column: columns, stream_ids: state.selectedRowKeys});
      setTimeout(() => {
        closeSelect()
      }, 1000)
    };

    const ownerPreStore = () => {
      emit("ownerPreStore");
    };

    const handleTableChange = (pager, filters, sorter) => {
      emit("handleTableChange", pager, filters, sorter);
    };

    // 租客详情
    const toOwnerDetail = (id) => {
      state.ownerId = id;
      state.ownerDetailVisible = true;
    };

    const incomeMatch = () => {
      state.matchVisible = true;

    }
    const rowSelection = computed(() => ({
      selectedRowKeys: state.selectedRowKeys,
      onChange: onSelectChange,
    }));

    const onSelectChange = (selectedRowKeys, selectedRows) => {
      state.selectedRowKeys = selectedRowKeys;
      state.selectedRows = selectedRows;
    };

    const editTurnover = () => {
      console.log(state.selectedRowKeys, "12345")
      state.editVisible = true;
    }

    const closeSelect = () => {
      state.editVisible = false;
      state.selectedRowKeys = [];
      state.selectedRows = [];
    }

    return {
      ...toRefs(state),
      columns,
      showDraweres,
      customRow,
      addTurnover,
      importBillFlow,
      downLoadClick,
      ownerPreStore,
      handleTableChange,
      toOwnerDetail,
      closeAllModal,
      handleRefundConfig,
      handleRefundCancel,
      incomeMatch,
      rowSelection,
      editTurnover,
      closeSelect,

    };
  },
});

const columns = [
  {
    title: "房号",
    dataIndex: "room_number_txt",
    key: "room_number_txt",
  },
  {
    title: "对方账号",
    dataIndex: "other_account",
    key: "textShow",
    width: 100,
  },
  {
    title: "入账日期",
    dataIndex: "income_date",
    width: 100,
    sorter: true,
  },
  {
    title: "对方名称",
    dataIndex: "company_name",
    key: "company_name",
    width: 120,
  },
  {
    title: "付款公司",
    dataIndex: "invoice_title_txt",
    key: "invoice_title_txt",
    width: 120,
  },
  {
    title: "借贷标",
    dataIndex: "loan_type_txt",
    width: 100,
  },
  {
    title: "发生额",
    dataIndex: "amount",
    key: "textShow",
    width: 120,
    sorter: true,
  },
  {
    title: "币种（单位）",
    dataIndex: "currency_txt",
    width: 120,
  },
  {
    title: "汇款方式",
    dataIndex: "remit_type_txt",
    key: "textShow",
    width: 100,
  },
  {
    title: "已匹配金额",
    dataIndex: "match_price",
    key: "textShow",
    width: 120,
    sorter: true,
  },
  {
    title: "未匹配金额",
    dataIndex: "nomatch_price",
    key: "textShow",
    width: 120,
    sorter: true,
  },
  {
    title: "创建人",
    dataIndex: "cuser_uname",
    width: 100,
  },
  {
    title: "状态",
    dataIndex: "is_close",
    key: "is_close",
    width: 100,
  },
  {
    title: "创建日期",
    dataIndex: "created_at",
    width: 150,
    sorter: true,
  },
];
</script>

<style lang="less" scoped>
.table-header {
  margin: 0 20px;
  color: rgba(0, 0, 0, 0.8);
}

.no-title-table {
  :deep(.ant-table-title) {
    display: none;
  }
}

</style>
